<template>
  <div class="conditionsItem no_copy">
    <!-- field 字段选择 -->
    <el-select
      v-model="conditionsItem.field"
      :disabled="disabled"
      filterable
      @change="fieldChange"
      clearable
      class="select"
      :size="relationSize"
    >
      <el-option
          v-for="item in fieldListCopy"
          :key="item.propertyId"
          :label="item.propertyName"
          :value="item.propertyId"
        ></el-option>
    </el-select>
    <!-- function 字段 -->
    <el-select
      @change="functionChange"
      v-model="conditionsItem.function"
      :disabled="disabled"
      class="select"
      :size="relationSize"
    >
      <el-option v-for="_i in functionList" :key="_i.value" :label="_i.label" :value="_i.value"></el-option>
    </el-select>

    <!-- 有值 无值  -->
    <template v-if="conditionsItem.function == 'equal' || conditionsItem.function == 'notEqual'">
      <el-select
        @change="paramsChange"
        :disabled="disabled"
        :size="relationSize"
        v-model="conditionsItem.params"
        :popper-append-to-body="false"
        class="paramsArr select"
        multiple
        clearable
        allow-create
        filterable
        placeholder="请选择"
      >
        <el-option
          v-for="item in paramsList"
          :key="item.itemValue"
          :label="item.itemValue"
          :value="item.itemValue"
        >
          <el-popover
            v-if="item.itemValue.length >= 30"
            placement="top-start"
            width="600"
            trigger="hover"
          >
            <p>{{ item.itemValue }}</p>
            <span slot="reference">{{ item.itemValue.slice(0,29) + '...' }}</span>
          </el-popover>
          <span v-else>{{ item.itemValue }}</span>
        </el-option>
      </el-select>
    </template>
    <!-- 区间 -->
    <template v-if="conditionsItem.function == 'between'">
      <el-input
        @change="paramsChange"
        :disabled="disabled"
        type="number"
        :size="relationSize"
        v-model="conditionsItem.params[0]"
      ></el-input>
      <span class="paramsDungTxt">至</span>
      <el-input
        @change="paramsChange"
        :disabled="disabled"
        type="number"
        :size="relationSize"
        v-model="conditionsItem.params[1]"
        placeholder="请输入内容"
      ></el-input>
    </template>
  </div>
</template>

<script>
export default {
  name: "conditionsItem", // 规则搭建组件
  props: {
    fieldType: {
      type: String,
      default: () => {
        return 'eventPropertyList';
      }
    },  //  没有传入 fieldList 时， 自查取值用的参数
    item: {
      type: Object,
      default: () => {
        return {
          field: null,
          function: null,
          params: []
        };
      }
    },
    relationSize: {
      type: String,
      default: () => {
        return "small";
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    eventId: {
      type: String,
      default: () => {
        return "_Anything";
      }
    },
    fieldList: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data() {
    return {
      fieldListCopy:[],
      functionList: [], // 第二列可选值
      paramsList: [], // 第三列可选值
      conditionsItem: {
        field: null,
        function: null,
        params: []
      }
    };
  },
  watch: {
    // item: {
    //   handler(newValue) {
    //     console.log(newValue);
    //   },
    //   deep: true
    // },
  },
  methods: {
    fieldChange(v) {
      let dataType = null;
      this.conditionsItem.function = null;
      this.conditionsItem.params = [];
      this.paramsListGet(v); // 更新第三列可选值
      this.conditionsItem.params = [];
      this.functionList = [];
      this.fieldListCopy.map(_i => {
        if (_i.propertyId == v) {
          dataType = _i.dataType;
        }
      });
      switch (dataType) {
        case "字符串":
          this.functionList = [
            {
              label: "等于",
              value: "equal"
            },
            {
              label: "不等于",
              value: "notEqual"
            },
            {
              label: "有值",
              value: "isSet"
            },
            {
              label: "无值",
              value: "notSet"
            }
          ];
          break;
        case "数值":
          this.functionList = [
            {
              label: "等于",
              value: "equal"
            },
            {
              label: "不等于",
              value: "notEqual"
            },
            {
              label: "有值",
              value: "isSet"
            },
            {
              label: "无值",
              value: "notSet"
            },
            {
              label: "区间",
              value: "between"
            }
          ];
          break;
        case "布尔":
          this.functionList = [
            {
              label: "为真",
              value: "isTrue"
            },
            {
              label: "为假",
              value: "isFalse"
            }
          ];
          break;
        case "STRING":
          this.functionList = [
            {
              label: "等于",
              value: "equal"
            },
            {
              label: "不等于",
              value: "notEqual"
            },
            {
              label: "有值",
              value: "isSet"
            },
            {
              label: "无值",
              value: "notSet"
            }
          ];
          break;
        case "NUMBER":
          this.functionList = [
            {
              label: "等于",
              value: "equal"
            },
            {
              label: "不等于",
              value: "notEqual"
            },
            {
              label: "有值",
              value: "isSet"
            },
            {
              label: "无值",
              value: "notSet"
            },
            {
              label: "区间",
              value: "between"
            }
          ];
          break;
        case "BOOL":
          this.functionList = [
            {
              label: "为真",
              value: "isTrue"
            },
            {
              label: "为假",
              value: "isFalse"
            }
          ];
          break;
      }
      this.$emit("change", this.conditionsItem);
    },
    functionChange(v) {
      if (v == "between") {
        this.conditionsItem.params = [0, 1];
      } else {
        this.conditionsItem.params = [];
      }
      this.$emit("change", this.conditionsItem);
    },
    paramsChange() {
      this.$emit("change", this.conditionsItem);
    },
    async paramsListGet(v) {
      this.paramsList = [];
      let properType;
      this.fieldListCopy.map(_i => {
        if (_i.propertyId == v) {
          properType = _i.properType;
        }
      });
      let res = await this.$analysisApi.eventAnalysis.metaPropertyDictionaryList(
        {
          appId: this.appId,
          propertyType: String(properType),
          propertyId: v
        }
      );
      if (res && res.success) {
        this.paramsList = res.value.list;
      }
    },
    // 如果为传入 第一列可选值，根据 eventId 自查
    async fieldListGet() {
      let res = await this.$analysisApi.eventAnalysis.eventAnalysisPropertyList(
        { appId: this.appId, eventId: this.eventId }
      );
      if(res&&res.success){
        res.value[this.fieldType].map(_i=>{
          _i.propertyId = "event." + this.eventId + "." + _i.propertyId;
        })
        return res.value[this.fieldType]
      }else{
        return []
      }
    }
  },
  async created() {
    let obj = {
      field: this.item.field,
      function: this.item.function,
      params: JSON.parse(JSON.stringify(this.item.params))
    };
    this.conditionsItem = obj;
    let dataType = null;
    this.fieldListCopy = JSON.parse(JSON.stringify(this.fieldList));
    if (!this.fieldListCopy || this.fieldListCopy.length == 0) {
      this.fieldListCopy = await this.fieldListGet();
    }
    if (this.fieldListCopy && this.fieldListCopy.length > 0) {
      this.fieldListCopy.map(_i => {
        if (_i.propertyId == obj.field) {
          dataType = _i.dataType;
        }
      });
    }
    switch (dataType) {
      case "字符串":
        this.functionList = [
          {
            label: "等于",
            value: "equal"
          },
          {
            label: "不等于",
            value: "notEqual"
          },
          {
            label: "有值",
            value: "isSet"
          },
          {
            label: "无值",
            value: "notSet"
          }
        ];
        break;
      case "数值":
        this.functionList = [
          {
            label: "等于",
            value: "equal"
          },
          {
            label: "不等于",
            value: "notEqual"
          },
          {
            label: "有值",
            value: "isSet"
          },
          {
            label: "无值",
            value: "notSet"
          },
          {
            label: "区间",
            value: "between"
          }
        ];
        break;
      case "布尔":
        this.functionList = [
          {
            label: "为真",
            value: "isTrue"
          },
          {
            label: "为假",
            value: "isFalse"
          }
        ];
        break;
      case "STRING":
        this.functionList = [
          {
            label: "等于",
            value: "equal"
          },
          {
            label: "不等于",
            value: "notEqual"
          },
          {
            label: "有值",
            value: "isSet"
          },
          {
            label: "无值",
            value: "notSet"
          }
        ];
        break;
      case "NUMBER":
        this.functionList = [
          {
            label: "等于",
            value: "equal"
          },
          {
            label: "不等于",
            value: "notEqual"
          },
          {
            label: "有值",
            value: "isSet"
          },
          {
            label: "无值",
            value: "notSet"
          },
          {
            label: "区间",
            value: "between"
          }
        ];
        break;
      case "BOOL":
        this.functionList = [
          {
            label: "为真",
            value: "isTrue"
          },
          {
            label: "为假",
            value: "isFalse"
          }
        ];
        break;
    }
  },
  mounted() {},
  components: {},
  computed: {
    appId() {
      return this.$store.state.global.appId;
    },
    appItem() {
      return this.$store.state.global.appItem;
    }
  }
};
</script>
<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.el-input {
  width: 2rem;
  margin: 0 4px;
}
::v-deep .el-tag {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
